// 不管示例1还是示例2都有一个共同的行为：将指定的内容挂载到指定的位置上
// 1- 将方法作为工具方法
// 2- 一般将工具方法放置到名字为utils或tools的文件中。
// 3- 在src->js中新建一个名字为utils.js的文件
// 4- index.html中引入utils.js
// 为数组原型增加一个方法，该方法负责生成一个字符串<a></a>
Array.prototype.sendAStr = function () {
    return this.map(function (item) {
        return `<a href="${item.href}">${item.context}</a>`
    }).join("");
};
// 1- 完成头部导航渲染功能
// 2- 完成商品导航渲染。
(function () {
    // 1- 完成头部导航渲染功能
    utils.render(headerNavArr.sendAStr(), ".container nav");
    // 2- 完成商品导航渲染。
    utils.render(goodsNavArr.sendAStr(), "#goodsNav");
})();
// 3- 店铺新品
(function () {
    // 3- 店铺新品
    // 生成的数据放入到指定的位置
    utils.render(shopNew.map(function (item) {
        return `
            <li>
                <div class="p-img ac">
                    <a target="_blank" title="${item.title}" href="#">
                        <img alt="${item.title}" src="${item.img}">
                    </a>
                </div>
                <div class="p-name">
                    <a target="_blank" title="${item.title}" href="#">${item.title}</a>
                </div>
                <div class="p-price"><strong>${item.price.toFixed(2)}</strong></div>
            </li>        
        `
    }).join(""),"#plist");
})();
// 4-商品介绍
(function (){
    // 4-商品介绍
    /*************************1-完成切换*************************************************/
    // // 4-1 获得所有的li
    // var lis = document.querySelectorAll("#shopTab .tab-main li");
    // var divs = document.querySelectorAll("#shopTab .tab-con > div");
    // // 设置选中的下标
    // var activeIndex = 0;
    // // 4-2 为所有的li增加点击事件
    // lis.forEach(function (item,index){
    //     // 隐藏div
    //     divs[index].style.display = "none";
    //     item.onclick = function (){
    //         // 移除之前选中的li
    //         lis[activeIndex].className = null;
    //         divs[activeIndex].style.display = "none";
    //         // 将当前点击按钮的所在下标设置为activeIndex
    //         activeIndex = index;
    //         this.className = "current";
    //         divs[activeIndex].style.display = "block";
    //     }
    // })
    // lis[activeIndex].className = "current";
    // divs[activeIndex].style = "block";

    /************************2-封装切换功能********************************************/
    // 1- 封装的功能放到到文件中src->lib->Tab
    // 2- 在src->lib->Tab.js文件中封装Tab
    // 3- 将Tab.js在HTML页面中引入
    new Tab({
        btns:"#shopTab .tab-main li",
        divs:"#shopTab .tab-con > div"
    });
})();
// 5-店铺热销与热门关注切换
(function (){
    /**************************未优化***********************************/
    // // 1- 渲染按钮数据
    // utils.render(popHot.map(function (item){
    //     return `<li>${item.type}</li>`
    // }).join(""),"#popHot .tab-main");
    //
    // // 2- 渲染店铺热销与热门关注的数据
    // var htmlStr = "";
    // popHot.forEach(function(item){
    //     // <ul><li></li><li></li><li></li><li></li><li></li>
    //     htmlStr += `<ul class="plist">`;
    //     htmlStr += item.list.map(function (info,index){
    //         return `
    //              <li>
    //                 <div class="p-num">${index+1}</div>
    //                 <div class="p-img">
    //                     <a target="_blank" title="${info.title}" href="#">
    //                         <img alt="${info.title}" src="${info.img}">
    //                     </a>
    //                 </div>
    //                 <div class="p-name">
    //                     <a target="_blank" title="${info.title}" href="#">${info.title}</a>
    //                 </div>
    //                 <div class="p-info clearfix">
    //                     <div class="p-count fl">热销<em>2054059</em>件</div>
    //                     <div class="p-price fr"><strong class="J-p-100016046426">${info.price.toFixed(2)}</strong></div>
    //                 </div>
    //             </li>
    //         `
    //     }).join("");
    //     htmlStr += "</ul>"
    // })
    // utils.render(htmlStr,"#popHot .tab-con");

    // 3- 实现切换
    // new Tab({
    //     btns:"#popHot .tab-main li",
    //     divs:"#popHot .tab-con .plist"
    // })
    /***********************优化***************************************/
    // 1- 完成按钮以及内容的渲染
    var htmlStr = "";// 内容
    var btnStr = "";// 按钮
    popHot.forEach(function(item){
        btnStr += `<li>${item.type}</li>`;
        htmlStr += `<ul class="plist">`;
        htmlStr += item.list.map(function (info,index){
            return `
                 <li>
                    <div class="p-num">${index+1}</div>
                    <div class="p-img">
                        <a target="_blank" title="${info.title}" href="#">
                            <img alt="${info.title}" src="${info.img}">
                        </a>
                    </div>
                    <div class="p-name">
                        <a target="_blank" title="${info.title}" href="#">${info.title}</a>
                    </div>
                    <div class="p-info clearfix">
                        <div class="p-count fl">热销<em>2054059</em>件</div>
                        <div class="p-price fr"><strong class="J-p-100016046426">${info.price.toFixed(2)}</strong></div>
                    </div>
                </li>
            `
        }).join("");
        htmlStr += "</ul>"
    })
    utils.render(btnStr,"#popHot .tab-main");
    utils.render(htmlStr,"#popHot .tab-con");

    // 2- 实现切换
    new Tab({
        btns:"#popHot .tab-main li",
        divs:"#popHot .tab-con .plist"
    })
})();
// 6-完成放大镜功能
(function (){
    /*********************1- 完成小图列表的渲染************************************/
    // 1-1 先找到小图的数据goodsDetail.typeList[0].preViewList->s
    // 2-2 将数据生成HTML字符串，通过render将其呈现到页面中
    // utils.render(goodsDetail.typeList[0].preViewList.map(function (item){
    //     return `<li><img src="${item.s}"></li>`
    // }).join(""),"#smallList");

    /*********************2- 小图列表渲染封装为一个函数************************************/
    // 2-1 封装成一个函数，可以指定图片的类别。
    // 2-2 可以通过该函数，完成小图列表的渲染，中图的渲染，大图的渲染
    // 2-3 完成小图下标为0的边框
    // // 中图
    // var mainImg = document.querySelector(".preview .main-img");
    // // 大图
    // var bigImg = document.querySelector(".preview .big-img");
    // init(0);
    // function init(i){
    //     // 获得放大镜相关的信息
    //     var preViewList = goodsDetail.typeList[i].preViewList;
    //     // 更改中图的图片地址
    //     mainImg.src = preViewList[0].m;
    //     // 更改大图的图片地址
    //     bigImg.src = preViewList[0].b;
    //     utils.render(preViewList.map(function (item,index){
    //         return `<li class="${index===0?'img-hover':''}"><img src="${item.s}"></li>`
    //     }).join(""),"#smallList");
    // }


    /*********************3- 为小图增加边框,更改大中图地址************************************/
    // // 3-1 当鼠标移入到小图后，为小图父级li增加边框
    // // 3-2 当鼠标移入到小图后，对应中图地址发生变化
    // // 3-3 当鼠标移入到小图后，对应大图地址发生变化
    // // 回顾移入移出事件：
    // // 1- mouseenter/mouseleave  不会产生冒泡，如果使用委托，不建议
    // // 2- mouseover/mouseout     产生冒泡
    // // 获得包裹小图列表的元素
    // var smallList = document.querySelector("#smallList");
    // // 中图
    // var mainImg = document.querySelector(".preview .main-img");
    // // 大图
    // var bigImg = document.querySelector(".preview .big-img");
    // // 小图选中的下标
    // var tabIndex = 0;
    // // 放大镜的数据
    // var preViewList = [];
    // init(0);
    // function init(i){
    //     // 获得放大镜相关的信息
    //     preViewList = goodsDetail.typeList[i].preViewList;
    //     // 更改中图的图片地址
    //     mainImg.src = preViewList[tabIndex].m;
    //     // 更改大图的图片地址
    //     bigImg.src = preViewList[tabIndex].b;
    //     utils.render(preViewList.map(function (item,index){
    //         return `<li class="${index===tabIndex?'img-hover':''}"><img data-index="${index}" src="${item.s}"></li>`
    //     }).join(""),"#smallList");
    // }
    // // 委托：将鼠标移入事件定义在smallList元素上
    // // img与smallList关系：
    // // <ul id="smallList"><li><img/></li><li><img/></li<li><img/></li<li><img/></li</ul>
    // smallList.onmouseover = function(e){
    //     //判断触发元素的名字是否为IMG
    //     if(e.target.nodeName.toLowerCase() === "img"){
    //         // 将smallList下被选中的子元素移除样式
    //         this.children[tabIndex].className = null;
    //         // 将当前所获得的图片（e.target）的下标作为tabIndex
    //         tabIndex = e.target.dataset.index;
    //         // 为小图父级li增加边框
    //         e.target.parentElement.className = "img-hover";
    //
    //         // 更改中图的图片地址
    //         mainImg.src = preViewList[tabIndex].m;
    //         // 更改大图的图片地址
    //         bigImg.src = preViewList[tabIndex].b;
    //     }
    // }


    /*********************4- 点击按钮完成左右移动************************************/
    // // 4-1 为增加增加点击事件
    // // 4-2 让ul进行移动 transform
    // // 获得包裹小图列表的元素
    // var smallList = document.querySelector("#smallList");
    // // 中图
    // var mainImg = document.querySelector(".preview .main-img");
    // // 大图
    // var bigImg = document.querySelector(".preview .big-img");
    // // 小图左侧按钮
    // var prevBtn = document.querySelector(".arrow-prev");
    // // 小图右侧按钮
    // var nextBtn = document.querySelector(".arrow-next");
    // // 小图选中的下标
    // var tabIndex = 0;
    // // 放大镜的数据
    // var preViewList = [];
    // // 小图移动的距离
    // var distace = 0;
    // // 移动的图片数量
    // var translateImg = 0;
    // // 设置过滤的时间
    // smallList.style.transition = "transform .2s";
    // init(0);
    // // 获得移动距离的两种方式
    // // 方式1：smallList的宽度/smallList的子元素数量
    // // distace = smallList.clientWidth/smallList.children.length;
    // // 方式2：子元素宽度
    // distace = smallList.children[0].offsetWidth;
    // function init(i){
    //     // 获得放大镜相关的信息
    //     preViewList = goodsDetail.typeList[i].preViewList;
    //     // 更改中图的图片地址
    //     mainImg.src = preViewList[tabIndex].m;
    //     // 更改大图的图片地址
    //     bigImg.src = preViewList[tabIndex].b;
    //     utils.render(preViewList.map(function (item,index){
    //         return `<li class="${index===tabIndex?'img-hover':''}"><img data-index="${index}" src="${item.s}"></li>`
    //     }).join(""),"#smallList");
    // }
    // smallList.onmouseover = function(e){
    //     //判断触发元素的名字是否为IMG
    //     if(e.target.nodeName.toLowerCase() === "img"){
    //         // 将smallList下被选中的子元素移除样式
    //         this.children[tabIndex].className = null;
    //         // 将当前所获得的图片（e.target）的下标作为tabIndex
    //         tabIndex = e.target.dataset.index;
    //         // 为小图父级li增加边框
    //         e.target.parentElement.className = "img-hover";
    //
    //         // 更改中图的图片地址
    //         mainImg.src = preViewList[tabIndex].m;
    //         // 更改大图的图片地址
    //         bigImg.src = preViewList[tabIndex].b;
    //     }
    // }
    // /*******完成点击按钮将小图进行移动功能********/
    // // // 为小图左侧按钮增加单击事件
    // // prevBtn.onclick = function(){
    // //     translateImg-=1;
    // //     if(translateImg<0) translateImg =0;
    // //     smallList.style.transform = `translateX(${-translateImg*distace}px)`;
    // // }
    // // // 为小图右侧按钮增加单击事件
    // // nextBtn.onclick = function(){
    // //     translateImg+=1;
    // //     if(translateImg>smallList.children.length-5)  translateImg= smallList.children.length-5;
    // //     smallList.style.transform = `translateX(${-translateImg*distace}px)`
    // // }
    // /*******完成点击按钮将小图进行移动功能优化********/
    // prevBtn.onclick = moveSmallImg.bind(this,-1);
    // nextBtn.onclick = moveSmallImg.bind(this,1);
    // function moveSmallImg(num){
    //     translateImg+=num;
    //     if(translateImg<0) translateImg = 0;
    //     else if(translateImg>smallList.children.length-5)  translateImg= smallList.children.length-5;
    //     smallList.style.transform = `translateX(${-translateImg*distace}px)`
    // }
    /*******************5-完成放大镜功能**************************************************/
    /*
    * 1- 将鼠标放入id为main的元素中要显示大图以及蒙层*
    * 2- 将鼠标移出id为main的元素中要隐藏大图以及蒙层
    * 3- 增加鼠标移动事件。
    *    3-1：蒙层会跟随鼠标移动
    *    3-2：大图也会进行移动
    * */
    // 小图的容器
    var smallList = document.querySelector("#smallList");
    // 中图
    var mainImg = document.querySelector(".preview .main-img");
    // 大图
    var bigImg = document.querySelector(".preview .big-img");
    // 小图左侧按钮
    var prevBtn = document.querySelector(".arrow-prev");
    // 小图右侧按钮
    var nextBtn = document.querySelector(".arrow-next")
    // 主体部分
    var mainDiv = document.querySelector(".preview .main");
    // 获得蒙层:从mainDiv中查找class为.zoom的元素
    var zoom = mainDiv.querySelector(".zoom");
    // 获得大图的容器
    var bigdiv = mainDiv.querySelector(".zoomdiv");
    // 视频标签
    var video = document.querySelector("#video-player_html5_api");
    // 获得视频图标
    var videoIcon = document.querySelector(".video-icon");
    // 视频关闭按钮
    var videoClose = document.querySelector(".close-video");
    // 商品标题
    var goodsTitle = document.querySelector("#goodsTitle");
    // 获取配件的左侧图片
    var fittingsImg = document.querySelector("#fittingsImg");
    // 获取配件左侧的标题
    var fittingsText = document.querySelector("#fittingsText");
    // 小图选中的下标
    var tabIndex = 0;
    // 放大镜的数据
    var preViewList = [];
    // 小图移动的距离
    var distace = 0;
    // 移动的图片数量
    var translateImg = 0;
    // 设置过滤的时间
    smallList.style.transition = "transform .2s";
    init(0);
    distace = smallList.children[0].offsetWidth;
    function init(i,e){
        // 获得放大镜相关的信息
        preViewList = goodsDetail.typeList[i].preViewList;
        // 更改商品标题
        goodsTitle.innerText = goodsDetail.typeList[i].title;
        // 更改中图的图片地址
        mainImg.src = preViewList[tabIndex].m;
        // 更改大图的图片地址
        bigImg.src = preViewList[tabIndex].b;


        fittingsImg.innerHTML = `<img src="${goodsDetail.typeList[i].imgSrc}" alt="${goodsDetail.typeList[i].title}">`;
        fittingsText.innerHTML = `<a href="#" target="_blank">${goodsDetail.typeList[i].title}</a>`

        utils.render(preViewList.map(function (item,index){
            return `<li class="${index===tabIndex?'img-hover':''}"><img data-index="${index}" src="${item.s}"></li>`
        }).join(""),"#smallList");

        //  判断e是否为undefined,如果不相等，则来自于事件
       if(typeof e !== "undefined"){
           // 1- 将拥有名字为active样式的元素移除掉active。
           // 找到事件源元素对象父级，在父级中查找拥有active的元素，将拥有active的元素移除active
           e.currentTarget.parentElement.querySelector(".active").classList.remove("active");
           // 2- 将当前点击的颜色按钮增加上样式active
           e.currentTarget.classList.add("active");
       }
    }
    smallList.onmouseover = function(e){
        //判断触发元素的名字是否为IMG
        if(e.target.nodeName.toLowerCase() === "img"){
            // 将smallList下被选中的子元素移除样式
            this.children[tabIndex].className = null;
            // 将当前所获得的图片（e.target）的下标作为tabIndex
            tabIndex = e.target.dataset.index;
            // 为小图父级li增加边框
            e.target.parentElement.className = "img-hover";

            // 更改中图的图片地址
            mainImg.src = preViewList[tabIndex].m;
            // 更改大图的图片地址
            bigImg.src = preViewList[tabIndex].b;
        }
    }
    /*******完成点击按钮将小图进行移动功能优化********/
    prevBtn.onclick = moveSmallImg.bind(this,-1);
    nextBtn.onclick = moveSmallImg.bind(this,1);
    function moveSmallImg(num){
        translateImg+=num;
        if(translateImg<0) translateImg = 0;
        else if(translateImg>smallList.children.length-5)  translateImg= smallList.children.length-5;
        smallList.style.transform = `translateX(${-translateImg*distace}px)`
    }
    /*******将鼠标放入id为main的元素中要显示大图以及蒙层****/
    // // 主体部分
    // var mainDiv = document.querySelector(".preview .main");
    // // 获得蒙层:从mainDiv中查找class为.zoom的元素
    // var zoom = mainDiv.querySelector(".zoom");
    // // 获得大图的容器
    // var bigdiv = mainDiv.querySelector(".zoomdiv");
    // // 增加移入事件
    // mainDiv.onmouseenter = function(){
    //     zoom.style.display = bigdiv.style.display = "block";
    // }
    // // 增加移出事件
    // mainDiv.onmouseleave = function (){
    //     zoom.style.display = bigdiv.style.display = "none";
    // }
    // // 为大图容器增加移入事件
    // bigdiv.onmouseenter = function(){
    //     zoom.style.display = bigdiv.style.display = "none";
    // }
    /*****将鼠标放入id为main的元素中要显示大图以及蒙层优化*****/
    // 增加移入事件
    mainDiv.onmouseenter = function(){
        // 判断当前是否打开视频播放标签
        if(video.parentElement.style.display === "block") return;
        zoom.style.display = bigdiv.style.display = "block";
    }
    // 增加移出事件，为大图容器增加移入事件
    mainDiv.onmouseleave = bigdiv.onmouseenter = function(){
        zoom.style.display = bigdiv.style.display = "none";
    }
    /*****`mainDiv`增加鼠标移动事件*****/
    // mainDiv.onmousemove = function(e){
    //     // 1- 让蒙层根据鼠标的移动而移动。
    //     //   1-1 鼠标在蒙层的中间位置。
    //     //   1-2 蒙层不允许超出范围。
    //     // 2- 大图也要移动
    //     // e.offsetX:触发事件元素的x坐标，而不是事件源的坐标。
    //     // console.log(e.offsetX)
    //     // 鼠标在浏览器的横向坐标\纵向坐标
    //     // console.log(e.clientX,e.clientY);
    //     // mainDiv距离浏览器左侧的横向坐标，纵向坐标。
    //     // console.log(this.getBoundingClientRect().left,this.getBoundingClientRect().top);
    //     // 鼠标在mainDiv的横向坐标与纵向坐标
    //     // console.log(e.clientX-this.getBoundingClientRect().left,e.clientY-this.getBoundingClientRect().top)
    //     // 蒙层left:鼠标距离浏览器左侧的值-mainDiv距离浏览器左侧的值-蒙层的一半
    //     var leftV = e.clientX-mainDiv.getBoundingClientRect().left-zoom.offsetWidth/2;
    //     var topV = e.clientY-mainDiv.getBoundingClientRect().top-zoom.offsetHeight/2;
    //     // left最大值：mainDiv的宽度-zoom的宽度
    //     var leftMax = mainDiv.clientWidth-zoom.offsetWidth;
    //     // top 最大值：mainDiv的高度-zoom的高度
    //     var topMax = mainDiv.clientHeight-zoom.offsetHeight;
    //     // 不允许超出范围。
    //     if(leftV<0) leftV =0;
    //     else if(leftV>leftMax) leftV = leftMax;
    //     if(topV<0) topV = 0;
    //     else if(topV>topMax) topV = topMax;
    //     zoom.style.left = leftV+"px";
    //     zoom.style.top = topV+"px";
    //
    //     // 大图：800*800  小图：450*450=====》小图宽度/大图宽度=0.5625
    //     // 蒙层：303.75*303.75  大图所在的容器：540 * 540  ====》蒙层宽度/大图容器=0.5625
    //     // var n = mainImg.clientWidth/bigImg.clientWidth;
    //     // bigImg.style.transform = `translate(${-leftV/n}px,${-topV/n}px)`;
    //
    //     // 大图/小图
    //     var n = bigImg.clientWidth/mainImg.clientWidth;// 1.777777778
    //     bigImg.style.transform = `translate(${-leftV*n}px,${-topV*n}px)`;
    // }
    /****`mainDiv`增加鼠标移动事件优化*****/
    /*
    * 1- 问题：鼠标在mainDiv当中移动时会执行事件处理函数
    *    答：可以通过节流函数对其进行优化。
    *       节流函数：在规定的时间内只执行一次，节省内存，从而提升执行效率。
    * */
    // 优化一
    // var lastTime = Date.now();// 当前时间戳
    // mainDiv.onmousemove = function(e){
    //     // 看门狗：判断函数执行的时间间隔是否小于100ms,如果小于100ms直接返回。
    //     if(Date.now()-lastTime<100) return;
    //     console.log(Date.now()-lastTime);// 输出间隔的时间
    //     lastTime = Date.now();
    //     var leftV = e.clientX-mainDiv.getBoundingClientRect().left-zoom.offsetWidth/2;
    //     var topV = e.clientY-mainDiv.getBoundingClientRect().top-zoom.offsetHeight/2;
    //     // left最大值：mainDiv的宽度-zoom的宽度
    //     var leftMax = mainDiv.clientWidth-zoom.offsetWidth;
    //     // top 最大值：mainDiv的高度-zoom的高度
    //     var topMax = mainDiv.clientHeight-zoom.offsetHeight;
    //     // 不允许超出范围。
    //     if(leftV<0) leftV =0;
    //     else if(leftV>leftMax) leftV = leftMax;
    //     if(topV<0) topV = 0;
    //     else if(topV>topMax) topV = topMax;
    //     zoom.style.left = leftV+"px";
    //     zoom.style.top = topV+"px";
    //     // 大图/小图
    //     var n = bigImg.clientWidth/mainImg.clientWidth;// 1.777777778
    //     bigImg.style.transform = `translate(${-leftV*n}px,${-topV*n}px)`;
    // }

    // 优化二：将节流函数进行抽离：将判断时间的程序进行函数的封装
    // 高阶函数：接收的参数是函数或返回的结果是函数的函数，称为高阶函数（一等函数）
    // 之前接触过的高阶函数。setTimeout(function(){});数组.map
    // mainDiv.onmousemove = throttle(function(e){
    //     // 当时间间隔超过100ms,会执行该函数
    //     var leftV = e.clientX-mainDiv.getBoundingClientRect().left-zoom.offsetWidth/2;
    //     var topV = e.clientY-mainDiv.getBoundingClientRect().top-zoom.offsetHeight/2;
    //     // left最大值：mainDiv的宽度-zoom的宽度
    //     var leftMax = mainDiv.clientWidth-zoom.offsetWidth;
    //     // top 最大值：mainDiv的高度-zoom的高度
    //     var topMax = mainDiv.clientHeight-zoom.offsetHeight;
    //     // 不允许超出范围。
    //     if(leftV<0) leftV =0;
    //     else if(leftV>leftMax) leftV = leftMax;
    //     if(topV<0) topV = 0;
    //     else if(topV>topMax) topV = topMax;
    //     zoom.style.left = leftV+"px";
    //     zoom.style.top = topV+"px";
    //     // 大图/小图
    //     var n = bigImg.clientWidth/mainImg.clientWidth;// 1.777777778
    //     bigImg.style.transform = `translate(${-leftV*n}px,${-topV*n}px)`;
    // },100)
    // // 封装节流函数
    // function throttle(callback,time){
    //     var lastTime = Date.now();// 当前的时间戳
    //     return function(e){
    //         if(Date.now()-lastTime<time) return;
    //         lastTime = Date.now();
    //
    //         callback.call(this,e);
    //     }
    // }

    // 优化三：将封装的节流函数放置到外部（utils）
    mainDiv.onmousemove = utils.throttle(function (e){
        // 当时间间隔超过100ms,会执行该函数
        var leftV = e.clientX-mainDiv.getBoundingClientRect().left-zoom.offsetWidth/2;
        var topV = e.clientY-mainDiv.getBoundingClientRect().top-zoom.offsetHeight/2;
        // left最大值：mainDiv的宽度-zoom的宽度
        var leftMax = mainDiv.clientWidth-zoom.offsetWidth;
        // top 最大值：mainDiv的高度-zoom的高度
        var topMax = mainDiv.clientHeight-zoom.offsetHeight;
        // 不允许超出范围。
        if(leftV<0) leftV =0;
        else if(leftV>leftMax) leftV = leftMax;
        if(topV<0) topV = 0;
        else if(topV>topMax) topV = topMax;
        zoom.style.left = leftV+"px";
        zoom.style.top = topV+"px";
        // console.log(mainDiv.clientWidth,zoom.offsetWidth,leftMax,leftV);
        // 大图/小图
        var n = bigImg.clientWidth/mainImg.clientWidth;// 1.777777778
        bigImg.style.transform = `translate(${-leftV*n}px,${-topV*n}px)`;
    },100);
    /**********视频播放******************/
    // 点击播放按钮
    videoIcon.onclick = function(){
        // 将视频父级DIV进行显示
        video.parentElement.style.display = "block";
        // 播放视频
        video.play();
    }
    // 点击关闭视频按钮，视频播放结束之后
    videoClose.onclick = video.onended = function(e){
        // 将视频父级DIV进行隐藏
        video.parentElement.style.display = "none";
        // 暂停
        // video.pause();
        video.load();// 重新加载
        // 执行onmousemove
        zoom.style.display = "block";
        mainDiv.onmousemove(e);
    }
    window.init = init;
})();
// 7-完成商品详情
(function (){
    // 价格存放的元素
    var price = document.querySelector("#price");
    // 重量存放的元素
    var weight = document.querySelector(".summary-weight .dd");
    // 存入类别的容器元素
    var crumb = document.querySelector("#crumb");
    // 增加数量
    var addBtn = document.querySelector(".btn-add");
    // 减少数量
    var reduceBtn = document.querySelector(".btn-reduce");
    // 显示购买的数量
    var buyNumInp = document.querySelector("#buy-num");
    // 定义一个变量：改变的价格
    var changePrice = 0;//
    // 定义购买商品的初始值
    var buyNum = 1;
    // 1- 渲染价格
    price.innerText = goodsDetail.price.toFixed(2);
    // 2- 商品重量
    weight.innerText = goodsDetail.weight;
    // 3- 渲染手机颜色
    utils.render(goodsDetail.typeList.map(function (item,index){
        return `
            <div onclick="init(${index},event)" class="item ${index===0?'active':''}">
                <img src="${item.imgSrc}"><i>${item.type}</i>
            </div>
        `
    }).join(""),"#chooseColor");
    // 4- 渲染类别
    utils.render(goodsDetail.crumbData.map(function(item){
        return `
            <div class="p-choose">
                <div class="dt ">${item.title}</div>
                <div class="dd">
                    ${item.data.map(function (info,index){
                        return `<div data-price="${info.changePrice}" class="item ${index===0?'active':''}">${info.type}</div>`
                    }).join("")}
                </div>
            </div>
        `
    }).join(""),"#crumb");

    // 5-为crumb增加单击事件
    crumb.onclick = function(e){
        // 判断e.target元素当中的class属性是否拥有item.
        if(e.target.classList.contains("item")){
            // 将之前选中的active移除
            var activeEle = e.target.parentElement.querySelector(".active");
            changePrice -= activeEle.dataset.price/1;
            activeEle.classList.remove("active");

            // 为当前点击的元素e.target增加样式active
            e.target.classList.add("active");
            // 更新价格
            // price.innerText = goodsDetail.price+e.target.dataset.price/1;

            changePrice += e.target.dataset.price/1;
            priceHandler();
        }
    }

    // 6- 购买商品的数量操作未优化
    // addBtn.onclick = function(){
    //     buyNum++;
    //     buyNum===1?reduceBtn.classList.add("disabled"):reduceBtn.classList.remove("disabled")
    //     buyNumInp.value = buyNum;
    //     price.innerText = ((goodsDetail.price+changePrice)*buyNum).toFixed(2);
    // }
    // reduceBtn.onclick = function(){
    //     buyNum--;
    //     if(buyNum<1) buyNum =1;
    //     buyNum===1?reduceBtn.classList.add("disabled"):reduceBtn.classList.remove("disabled")
    //     buyNumInp.value = buyNum;
    //    price.innerText = ((goodsDetail.price+changePrice)*buyNum).toFixed(2);
    // }
    // // 防抖函数：在规定的时间内只执行最后一次
    // var timer = null;
    // buyNumInp.oninput = function(){
    //     clearTimeout(timer);
    //     timer = setTimeout(function (){
    //         var num = parseInt(buyNumInp.value);
    //         if(isNaN(num)){
    //             num = 1;
    //         }
    //         if(num<1) num = 1;
    //         buyNum = num;
    //         buyNumInp.value = buyNum;
    //       price.innerText = ((goodsDetail.price+changePrice)*buyNum).toFixed(2);
    //     },2000)
    // }

    // 7- 购买商品的数量操作优化
    // 7-1 可以将价格的改动写成一个函数priceHandler。
    // 7-2 优化防抖函数
    // 7-3 将事件处理函数进行合并。
    // handler:句柄。
    function priceHandler(){
        price.innerText = ((goodsDetail.price+changePrice)*buyNum).toFixed(2);
    }
    function changeBuyNum(num,e){
        if(e.type === "input"){// 判断事件类型
            var n = parseInt(this.value);
            if(isNaN(n)) n = 1;
            buyNum = n;
        }
        buyNum+=num;
        if(buyNum<1) buyNum = 1;
        buyNum===1?reduceBtn.classList.add("disabled"):reduceBtn.classList.remove("disabled")
        buyNumInp.value = buyNum;
        priceHandler();
    }
    addBtn.onclick = changeBuyNum.bind(addBtn,1);
    reduceBtn.onclick = changeBuyNum.bind(reduceBtn,-1);
    buyNumInp.oninput = utils.debounce(function(e){
        changeBuyNum.call(this,0,e)
    },2000)
})();
// 8- 完成手机配件
(function (){
    // 配件商品元素
    var tabCon = document.querySelector(".fittings .tab-con .suits");
    // 放置价格的元素
    var priceText = document.querySelector("#priceText");
    // 配件的价格
    var fittingsPrice = 0;
    // 1- 数据进行渲染
    var tabMainHTML = "";
    var tabConHTML = "";
    goodsDetail.fittings.forEach(function (item){
        tabMainHTML+=`<li>${item.types}</li>`;
        tabConHTML += `
           <ul class="lh" style="display: none">
                ${item.list.map(function (info){
                    return `
                        <li>
                            <div class="p-img">
                                <a href="#" target="_blank">
                                    <img src="${info.img}">
                                </a>
                            </div>
                            <div class="p-name">
                                <a href="#" target="_blank"
                                   title="${info.title}">${info.title}</a>
                            </div>
                            <div class="p-price">
                                <input data-price="${info.price}" type="checkbox">
                                <strong>￥${info.price.toFixed(2)}</strong>
                            </div>
                        </li>
                    `
                }).join("")}
                
            </ul>
        
        `
    })
    utils.render(tabMainHTML,".fittings .tab-main");
    utils.render(tabConHTML,".fittings .tab-con .suits");
    // 2- 进行切换
    new Tab({
        btns:".fittings .tab-main li",
        divs:".fittings .tab-con .suits ul",
        btnClassName:"active",
        displayV:"flex"
    })
    // 3- 计算配件+手机的价格
    priceText.innerText = "￥"+goodsDetail.price.toFixed(2);
    tabCon.onclick = function(e){
        // 判断是否点击了checkbox
        if(e.target.type === "checkbox"){
            // 如果选中，则增加该配件的价格
            if(e.target.checked) fittingsPrice+=e.target.dataset.price/1;
            else fittingsPrice-=e.target.dataset.price/1;
            priceText.innerText = "￥"+(goodsDetail.price+fittingsPrice).toFixed(2);
        }
    }
})();
// 9- 返回顶部
(function (){
    // 返回顶部元素
    var gotoTop = document.querySelector("#gotoTop");
    gotoTop.onclick = function(){
        window.scrollTo({
            top:0,
            behavior:"smooth"
        })
    }
})();
// 10 - 侧边栏
(function (){
    // 展开按钮
    var openBtn = document.querySelector("#openBtn");
    // 侧边栏外围 元素
    var pageAsider = document.querySelector("#pageAsider");
    openBtn.onclick = function(){
        this.classList.toggle("open");
        pageAsider.classList.toggle("open");
    }
})();

// 11- 地址联动
(function(){
    // area.js提供了一个变量proStr，该变量是一个数组，数组当中的每一个元素即是地址的一级目录
    // 二级目录在一级目录对象中的ITEMS属性上。
    // 三级目录在二级目录对象中的ITEMS属性上。
    // 四级目录在三级目录对象中的ITEMS属性上。

    // 1- 将数据进行渲染。
    // 1-1 创建一个便于操作的数据
    var areaArr = [
        {
            title:"请选择",// 选择的按钮
            contentList:proStr// 一级区域的列表
        },
        {
            title:"请选择",
            contentList:[]// 二级区域的列表
        },
        {
            title:"请选择",
            contentList:[]// 三级区域的列表
        },
        {
            title:"请选择",
            contentList:[]// 四级区域的列表
        }
    ]
    // 1-2 可以将按钮与内容进行渲染
    var areaTabHTML = "";
    var areaConHTML = "";
    var areaIndex = 0;// 记录级别 0 一级  1二级  2三级 3四级
    areaArr.forEach(function (item,index){
        areaTabHTML += (`
            <a  style="display:${index===0?'block':'none'}"
                class="ui-switchable-item ${index===0?'ui-area-current':''}">
                <em>${item.title}</em><i></i>
            </a>
        `);
        areaConHTML += (`
            <ul style="display: ${index===0?'flex':'none'}" class="ui-area-content-list">
                ${item.contentList.map(function(info,i){
                    return (`
                        <li><a data-index="${i}" href="javascript:void(0)">${info.NAME}</a></li>
                    `)
                }).join("")}
            </ul>
        `)
    });
    utils.render(areaTabHTML,"#areaTab");
    utils.render(areaConHTML,"#areaCon");
    // 获得包含区域信息的元素
    var areaCon = document.querySelector("#areaCon");
    // 按钮的em
    var ems = document.querySelectorAll("#areaTab em");
    // 区域ul
    var uls = document.querySelectorAll("#areaCon ul");
    // 获取按钮
    var btns = document.querySelectorAll("#areaTab a");
    // 选择的结果
    var areaValue = document.querySelector("#areaValue");
    // 弹出层
    var areaWrap = document.querySelector("#areaWrap");
    // 鼠标移入进去应该弹出内容
    var areaTextWrap = document.querySelector("#areaTextWrap");

    areaTextWrap.onmouseenter = function(){
        areaWrap.style.display = "block"
    }
    // 增加单击事件
    areaCon.onclick = function(e){
        // 是否点击了区域
        if(e.target.nodeName === "A"){
            // 找到e.target.parentElement.parentElement.querySelector(".active)，移除active
            var activeEle = e.target.parentElement.parentElement.querySelector(".active");
            // 如果有，则移除样式
            if(activeEle) activeEle.className = null;
            // 将e.target的父级li增加class=active
            e.target.parentElement.className = "active";

            // 将选择的区域作为标题值
            ems[areaIndex].innerText = areaArr[areaIndex].title =  e.target.innerText;

            // 显示下一级目录
            // 1-获得下一级目录的数据
            var contentList = areaArr[areaIndex].contentList[e.target.dataset.index].ITEMS;
            // 如果没有下一级数据
            if(!contentList){
                // 1- 统计选择的区域，并将其值放置到id为areaValue的元素内。
                // 1-1
                // areaValue.innerText = areaArr.filter(function (item){
                //     return item.title !== "请选择"
                // }).map(function(item){
                //     return item.title
                // }).join("");

                // 1-2
                var valueStr = "";
                for(var i=0;i<areaArr.length;i++){
                    if(areaArr[i].title==="请选择") break;
                    valueStr+=areaArr[i].title;
                }
                areaValue.innerText = valueStr;

                // 2- 关闭弹出层 id为areaWrap
                areaWrap.style.display = "none";
                return;
            }
            // 去除按钮的选中样式
            btns[areaIndex].classList.remove("ui-area-current");
            // 隐藏当前的ul
            e.target.parentElement.parentElement.style.display = "none";
            // 下一级
            areaIndex++;
            for(var i = areaIndex;i<areaArr.length;i++){
                // 隐藏按钮
                btns[i].style.display = "none";
                // 按钮的内容进行修改
                ems[i].innerText = areaArr[i].title =  "请选择";

            }
            // 更新区域数组
            areaArr[areaIndex].contentList = contentList;
            // 2-渲染数据
            uls[areaIndex].innerHTML = contentList.map(function (item,i){
                return (`
                    <li><a data-index="${i}" href="javascript:void(0)">${item.NAME}</a></li>
                `)
            }).join("")
            // 3-显示ul
            uls[areaIndex].style.display = "flex";
            // 4-将按钮显示出来
            btns[areaIndex].style.display = "block";
            // 5- 为按钮增加样式
            btns[areaIndex].classList.add("ui-area-current");

        }
    }

    btns.forEach(function (btn,index){
        btn.onclick = function(){
            // 将当前选中的按钮的样式移除掉
            btns[areaIndex].classList.remove("ui-area-current");
            uls[areaIndex].style.display = "none";
            areaIndex = index;
            this.classList.add("ui-area-current");
            uls[areaIndex].style.display = "flex";
        }
    })
})();

